<template>
	<view>
		<!-- <back></back> -->
		<view class="all">
			<view class="card">
				<view class="u-flex-center u-row-left">
					<image :src="goodsItem.image" mode="aspectFill" class="head-img"></image>
					<view class="u-flex-center u-row-between" style="width: 100%;">
						<view class="cont">
							<view class="name u-line-2">{{goodsItem.title}}</view>
							<view class="cate">规格：{{goodsItem.difference}}</view>
							<view class="price u-m-t-20"><text>￥</text>{{goodsItem.price}}</view>
						</view>
						<view class="number">×{{goodsItem.number}}</view>
					</view>
				</view>
			</view>
			<view class="card card2">
				<picker :range="list1" range-key="label" @change="confirm1">
					<view class="message-item u-flex u-row-between u-border-bottom">
						<view>物流状态</view>
						<view class="u-flex">
							<text class="u-m-r-10"
								:style="{color:isReceive.text?'#333':'#BEBEBE'}">{{isReceive.text||'是否收到货'}}</text>
							<u-icon name="arrow-right" color="#BEBEBE" size="25"></u-icon>
						</view>
					</view>
				</picker>
				<picker :range="list2" range-key="label" @change="confirm2">
					<view class="message-item u-flex u-row-between u-border-bottom">
						<view>退款类型</view>
						<view class="u-flex">
							<text class="u-m-r-10"
								:style="{color:refundType.text?'#333':'#BEBEBE'}">{{refundType.text||'请选择退款类型'}}</text>
							<u-icon name="arrow-right" color="#BEBEBE" size="25"></u-icon>
						</view>
					</view>
				</picker>
				<picker :range="list3" range-key="label" @change="confirm3">
					<view class="message-item u-flex u-row-between">
						<view>退款原因</view>
						<view class="u-flex">
							<text class="u-m-r-10"
								:style="{color:refundReason.text?'#333':'#BEBEBE'}">{{refundReason.text||'退款的原因'}}</text>
							<u-icon name="arrow-right" color="#BEBEBE" size="25"></u-icon>
						</view>
					</view>
				</picker>
			</view>
			<view class="card card2">
				<view class="message-item u-flex u-row-between">
					<view class="u-flex">
						<view>退款金额</view>
						<text class="u-m-l-20">(不能超过￥{{detail.pay.price}}元)</text>
					</view>
					<view class="evaluation u-flex-center">
						<text style="font-size: 30rpx;color: #EF5205;">￥</text>
						<view class="u-relative"  style="min-height: 1.4em;">
							<text style="color: rgba(0, 0, 0, 0);">{{!price?0:price}}</text>
							<input type="number" v-model="price" placeholder="0"
								placeholder-style="font-size: 30rpx;color: #EF5205;" cursor-spacing="1" maxlength="10">
						</view>
					</view>
				</view>
			</view>
			<view class="card card2">
				<view class="top-title u-p-t-20">上传凭证</view>
				<view class="top-sty">
					<view class="top_wrap u-flex">
						<view class="top_img top_img_big u-flex-center" v-for="item,index in fileList">
							<image :src="item" v-if="item" mode="widthFix"></image>
							<image src="@/static/yCreate/greenDelete.png" @click.stop="deleteImg(index)" class="ab_rig">
							</image>
						</view>
						<view class="top_img top_img_big u-flex-col u-col-center u-row-center" @click="uploadImg()">
							<image src="@/static/yCreate/add2.png" class="pho" mode="widthFix"></image>
							<view>点击上传</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card card2">
				<view class="message-item u-flex ">
					<view>退款理由</view>
					<input v-model="argument" type="text" class="u-m-l-20" placeholder="选填"
						placeholder-style="font-size: 30rpx;color: #BEBEBE;"></input>
				</view>
			</view>
		</view>
		<view style="height:300rpx; width: 100%;"></view>
		<view class="box">
			<view class="btn" @click="$u.throttle(submit, 1500)">提交申请</view>
		</view>
		<u-select v-model="show1" :list="list1" confirm-color="#46c188" @confirm="confirm($event,1)"></u-select>
		<u-select v-model="show2" :list="list2" confirm-color="#46c188" @confirm="confirm($event,2)"></u-select>
		<u-select v-model="show3" :list="list3" confirm-color="#46c188" @confirm="confirm($event,3)"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isReceive: {
					text: '',
					value: ''
				},
				refundType: {
					text: '',
					value: ''
				},
				refundReason: {
					text: '',
					value: ''
				},
				price: '',
				argument: '',
				fileList: [],
				fileList2: [],
				show1: false,
				show2: false,
				show3: false,
				list1: [{
						value: '0',
						label: '未收到货'
					},
					{
						value: '1',
						label: '已收到货'
					}
				],
				list2: [{
						value: '0',
						label: '我要退款(无需退货)'
					},
					{
						value: '1',
						label: '退货退款'
					}
				],
				list3: [{
						value: '0',
						label: '不喜欢'
					},
					{
						value: '1',
						label: '空包裹'
					},
					{
						value: '2',
						label: '一直未送达'
					},
					{
						value: '3',
						label: '颜色/尺码不符'
					},
					{
						value: '4',
						label: '质量问题'
					},
					{
						value: '5',
						label: '少件漏发'
					},
					{
						value: '6',
						label: '假冒品牌'
					},
				],
				detail: {},
				goodsItem: {}
			};
		},
		onLoad(options) {
			this.id = options.id
			this.goodsItem = JSON.parse(options.item)
			this.getDetail()
		},
		methods: {
			submit() {
				// let goods = []
				// this.detail.goods.map(item=>{
				// 	goods.push(item.id)
				// })
				if (Number(this.price) > Number(this.detail.pay.actual_payment)) {
					this.$u.toast('退款金额大于最大退款金额，请修改')
					return false
				} else if (!this.isReceive.value) {
					this.$u.toast('请选择物流状态')
					return false
				} else if (!this.refundType.value) {
					this.$u.toast('请选择退款类型')
					return false
				} else if (!this.refundReason.value) {
					this.$u.toast('请选择退款原因')
					return false
				}
				this.$u.post('/api/wanlshop/refund/addApply', {
					type: this.refundType.value, //   退款类型:0=我要退款(无需退货),1=退货退款
					expressType: this.isReceive.value, //  物流状态:0=未收到货,1=已收到货
					reason: this.refundReason.value,
					images: this.fileList2,
					order_type: "goods",
					money: this.price,
					refund_content: this.argument,
					order_id: this.id,
					goods: this.goodsItem.id
				}).then(res => {
					if (res.code == 1) {
						this.$u.toast('申请成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			getDetail() {
				this.$u.get('/api/wanlshop/order/getOrderInfo', {
					id: this.id
				}).then(res => {
					this.detail = res.data
					this.price = Number(this.detail.pay.actual_payment)
				})
			},
			confirm(e, type) {
				console.log(e,type)
				return false
				if (type == 1) {
					this.isReceive.text = e[0].label
					this.isReceive.value = e[0].value
				} else if (type == 2) {
					this.refundType.text = e[0].label
					this.refundType.value = e[0].value
				} else {
					this.refundReason.text = e[0].label
					this.refundReason.value = e[0].value
				}
			},
			confirm1(e){
				console.log(e)
				this.isReceive.text =this.list1[e.detail.value].label
				this.isReceive.value = this.list1[e.detail.value].value
			},
			confirm2(e){
				this.refundType.text =this.list2[e.detail.value].label
				this.refundType.value = this.list2[e.detail.value].value
			},
			confirm3(e){
				this.refundReason.text =this.list3[e.detail.value].label
				this.refundReason.value = this.list3[e.detail.value].value
			},
			uploadImg() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					success: function(res) {

						uni.uploadFile({
							url: 'https://apishop.qiancdj.com/api/common/upload_image', //上传
							filePath: res.tempFilePaths[0],
							name: "file",
							success: function(res) {
								let data = JSON.parse(res.data)
								that.fileList.push(data.data.fullurl)
								that.fileList2.push(data.data.url)
							},
							fail: function(err) {

							}
						});
					}
				})
			},
			deleteImg(index) {
				this.fileList.splice(index, 1)
				this.fileList2.splice(index, 1)
			},
		}
	}
</script>

<style lang="scss">
	.all {
		padding: 0 24rpx;

		.card {
			width: 100%;
			margin-top: 18rpx;
			padding: 20rpx;
			background: #FFFFFF;
			border-radius: 10rpx;

			.head-img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
			}

			.cont {
				width: 100%;

				.name {
					margin-bottom: 12rpx;
					font-size: 28rpx;
				}

				.cate {
					width: fit-content;
					width: -webkit-fit-content;
					width: -moz-fit-content;
					padding: 3rpx;
					background: #fafafa;
					font-size: 22rpx;
					border-radius: 5rpx;
				}

				.price {
					font-size: 40rpx !important;
					font-weight: 550;
					color: #EF5205;

					text {
						font-weight: 500;
						font-size: 20rpx;
					}
				}
			}

			.number {
				width: 120rpx;
				text-align: right;
				font-size: 24rpx;
				color: #B0B0B0;
			}

			.top-title {
				font-size: 30rpx;
				color: #333333;
			}

			.top-sty {

				padding: 20rpx 0;

				.top_img {
					width: 160rpx;
					height: 160rpx;
					background: #F7F7F7;
					border-radius: 20rpx;
					position: relative;
					overflow: hidden;
					font-size: 24rpx;
					color: #B0B0B0;

					image {
						width: 100%;
						height: 100%;
					}

					.pho {
						margin-bottom: 10rpx;
						width: 40rpx;
						height: auto;
					}

					.ab {
						position: absolute;
						top: 0;
						bottom: 0;
						left: 0;
						right: 0;
						margin: auto auto;
						z-index: 2;
					}

					.ab_rig {
						width: 50rpx;
						height: 50rpx;
						position: absolute;
						top: 6rpx;
						right: 6rpx;
						z-index: 2;
					}
				}

				.top_img_big {
					width: 160rpx;
					height: 160rpx;
					margin-right: 23rpx;

					&:nth-child(3n) {
						margin-right: 0rpx;
					}
				}
			}

			.message-item {
				padding: 30rpx 0;
				font-size: 30rpx;
				color: #333333;

				view {
					flex-shrink: 0;
				}

				text {
					text-align: right;
					display: block;
					color: #BEBEBE;
				}

				input {
					font-size: 30rpx;
				}

				.evaluation {
					font-size: 30rpx;
					color: #EF5205;

					input {
						position: absolute;
						top: 0;
						right: 0;
						width: 100%;
						height: 100%;
					}

					text {
						color: #999;
					}
				}

			}
		}
	}

	.card2 {
		padding: 0 20rpx !important;
	}

	.box {
		position: fixed;
		bottom: 0;
		padding: 20rpx 40rpx;
		width: 100%;
		background: #f6f6f6;
		padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));

		.btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 50rpx;
			background: linear-gradient(98deg, #606DCE 0%, #606DCE 100%);
			font-size: 28rpx;
			color: #fff;
		}
	}
</style>